<template>
  <div class="blog-comments-wrapper">
    <avatar :src="state.user.avatar" size="mini" class="avatar"></avatar>
    <div class="comment">
      <router-link :to="`/user/${state.user.userName}`"
        ><span class="user">{{ state.user.nickName }}</span></router-link
      >
      <span class="level">
        <level-tag :level="state.user.userLevel" />
      </span>
      <span class="content">
        <template v-if="state.answerId == 0">
          {{ state.content }}
        </template>
        <template v-else>
          回复<router-link :to="`/user/${state.answerId}`" class="reply-user">{{
            getReplyUser(state.answerId)
          }}</router-link
          >: {{ state.content }}
        </template>
      </span>
      <div class="comment-info info">
        <span class="comment-time">{{ replyTime(data.createTime) }}</span>
        <span class="comment-like">{{ data.likeCount }}点赞</span>
        <span class="comment-reply" @click="reply">回复</span>
      </div>
    </div>

    <!-- <slot></slot> -->
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import Avatar from "@/components/Avatar.vue";
// import bus from "./bus";

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const state = computed(() => props.data);

const emit = defineEmits(["reply", "getReply"]);

const reply = () => {
  // 通知其他组件隐藏回复组件
  // bus.emit("on-click", props.data.parentId, props.data);
  // showComment.value = !showComment.value;
  emit("reply", {
    answerId: props.data.id, // 回复的评论id
    blogId: props.data.blogId, // 博客id
    replyUser: props.data.user, // 回复的用户信息
  });
};

function getReplyUser(id: any) {
  let user = "";
  emit("getReply", id, (result: any) => {
    console.log(result);

    user = result;
  });
  return `@${user.nickName}`;
}
</script>

<style scoped lang="less">
.blog-comments-wrapper {
  display: flex;

  .avatar {
    margin-right: 10px;
  }

  .comment {
    word-break: break-all;
    & > * {
      // margin-right: 10px;
      // vertical-align: sub;
    }
  }

  .user {
    font-size: 0.8rem;
    color: #6d757a;
    font-weight: bold;
    // vertical-align: top;
  }
}

.comment-info {
  color: #6d757a;

  .comment-reply {
    cursor: pointer;
    &:hover {
      color: var(--app-main-color);
    }
  }
  & > * {
    margin-right: 10px;
  }
}

.child-comments {
  margin-top: 10px;
}

.info {
  font-size: 0.8rem;
}

.reply-user {
  color: var(--app-main-color);
}

.level {
  vertical-align: top;
}
</style>
